<template>
  <div class="page-container">
    <div v-show="!addShow">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row style="text-align: left;">

          <el-form-item>
            <el-popover
              placement="right"
              title="请选择供应商"
              trigger="click"
              width="800"
              hight="1000"
              v-model="clickMerchantVisible">
              <el-row>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <el-input v-model="filtersCyTable1.supplierId" placeholder="供应商编码"></el-input>
                </el-form-item>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <el-input v-model="filtersCyTable1.supplierName" placeholder="供应商名称"></el-input>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                             @click="resetCyTable1"/>
                </el-form-item>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <kt-button icon="fa fa-refresh" :label="$t('action.reset')"
                             @click="resetCyTable1"
                             type="primary"/>
                </el-form-item>

                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <kt-button icon="fa fa-hand-pointer-o" :label="$t('action.comfirm')"
                             @click="operationClick"
                             type="primary"/>
                </el-form-item>
              </el-row>
              <!--表格内容栏-->
              <cy-table1 :height="1000"
                         :data="pageResult" :columns="clickColumns"
                         @findPage="clinkMock" ref="CyTable1"
                         :showBatchDelete="false" :showDeleteOperation=false
                         :showEditOperation=false
                         :showDetailOperation=false :showOperation="false"
                         @handleDetail="handleDetail">
              </cy-table1>

              <el-input slot="reference" v-model="filters.supplier"
                        placeholder="供应商" :disabled="true"></el-input>
            </el-popover>
          </el-form-item>

          <el-form-item>
            <el-input v-model="filters.settleId" placeholder="结算单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="filters.preparedStartTime"
              type="date"
              placeholder="制单开始时间">
            </el-date-picker>
            -
            <el-date-picker
              v-model="filters.preparedEndTime"
              type="date"
              placeholder="制单结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.status" placeholder="当前状态" style="width: 200px;">
              <el-option label="全部" value="0">全部</el-option>
              <el-option label="待确认" value="1">待确认</el-option>
              <el-option label="待审核" value="2">待审核</el-option>
              <el-option label="已审核待付款" value="3">已审核待付款</el-option>
              <el-option label="审核不通过" value="4">审核不通过</el-option>
              <el-option label="已付款" value="5">已付款</el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="filters.tradeCurrency" placeholder="结算币别" style="width: 200px;">
              <el-option label="AUD" value="0">AUD</el-option>
              <el-option label="CNY" value="1">CNY</el-option>
              <el-option label="GBP" value="2">GBP</el-option>
              <el-option label="USD" value="3">USD</el-option>
            </el-select>
          </el-form-item>

        </el-row>


        <el-row style="text-align: left;">

          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                       @click="findPageMock"/>
          </el-form-item>
          <!-- <el-form-item>
                      <kt-button icon="fa fa-plus" :label="$t('action.add')"  type="primary" @click="handleAdd" />
                  </el-form-item> -->
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset"
                       type="primary"/>
          </el-form-item>

          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>

        </el-row>

      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPageMock"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350"
              :data="pageResult" :columns="detailColumns"
              @findPage="findPageMock" ref="CyTable"
              :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false
              :showDetailOperation=false @handleDetail="handleDetail">
    </cy-table>


    <!--新增-->
    <el-dialog
      :title="'选择商家'"
      width="40%"
      :visible.sync="merchantVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row>
          <el-form-item lable="供应商编码" prop="merchant_code"
                        style="float:left;padding-top:10px;padding-left:15px;">
            <el-input v-model="filtersCyTable1.merchant_code" placeholder="供应商编码"></el-input>
          </el-form-item>
          <el-form-item lable="供应商名称" prop="merchant_name"
                        style="float:left;padding-top:10px;padding-left:15px;">
            <el-input v-model="filtersCyTable1.merchant_name" placeholder="供应商名称"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" style="float:right;"
                       @click="resetCyTable1"
                       type="primary"/>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                       style="float:right;"
                       @click="resetCyTable1"/>
          </el-form-item>
        </el-row>
        <!--表格内容栏-->
        <cy-table1 :height="1000"
                   :data="pageResult" :columns="clickColumns"
                   @findPage="clinkMock" ref="CyTable1"
                   :showBatchDelete="false" :showDeleteOperation=false
                   :showEditOperation=false
                   :showDetailOperation=false :showOperation="false">
        </cy-table1>
        <el-row></el-row>
        <el-row>
          <el-form-item>
            <kt-button :label="'下一步'" style="float:right;padding-top:10px;padding-left:15px;"
                       @click="nextStepMerchant"
                       type="primary"/>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    </div>
    <div v-show="addShow">
      <addSettleBill @cancelClick="cancelClick"></addSettleBill>
    </div>

  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import CyTable from "@/views/Core/CyTable"
  import CyTable1 from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import {format} from "@/utils/datetime"
  import addSettleBill from "@/views/Paje/addSettleBill"

  export default {
    components: {
      PopupTreeInput,
      CyTable,
      CyTable1,
      KtButton,
      TableColumnFilterDialog,
      addSettleBill,
    },
    data() {
      return {
        imgUpload: this.utils.getUpLoadHost(),
        size: 'small',
        document_license: '',
        filters: {
          name: '',
          preparedStartTime: '',
          preparedEndTime: ''
        },
        filtersCyTable1: {},

        addShow:false,
        imgs: '',
        fileList: {},
        columns: [],
        warehouselist: [],
        filterColumns: [],
        detailColumns: [
          {prop: "settleId", label: "结算单号", minWidth: 120},
          {prop: "supplierName", label: "供应商名称", minWidth: 120},
          {prop: "supplierId", label: "供应商编码", minWidth: 120},
          {prop: "refundTotalAmount", label: "销退货总金额", minWidth: 120},
          {prop: "freeReceivableAmount", label: "费用应收金额", minWidth: 120},
          {prop: "freePayAmount", label: "费用应付金额", minWidth: 120},
          {prop: "totalPayAmount", label: "最终应付金额", minWidth: 120},
          {prop: "PayedAmount", label: "已付金额", minWidth: 120},
          {prop: "settleCurrencyType", label: "结算币别", minWidth: 120},
          {prop: "exchangeRate", label: "汇率", minWidth: 120},
          {prop: "reviewTime", label: "审核时间", minWidth: 120},
          {prop: "reviewUser", label: "审核人", minWidth: 120},
          {prop: "preparedTime", label: "制单时间", minWidth: 120},
          {prop: "preparedUser", label: "制单人", minWidth: 120},
          {prop: "status", label: "当前状态", minWidth: 120},
        ],

        clickColumns: [
          {prop: "supplierName", label: "供应商名称", minWidth: 120},
          {prop: "supplierId", label: "供应商编码", minWidth: 120},
        ],
        clickDetail: {
          "rows":
            [{
              "supplierId": "1945233321",
              "supplierName": "对账人民币经销供应商"
            },
              {
                "supplierId": "1911290006873624",
                "supplierName": "对账美元经销供应商"
              }],
          "total": 2,
          "code": "0000"
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        pageResultDetail: {
          "rows":
            [{
              "settleId": "12312312313",
              "supplierId": "3123123123123",
              "supplierName": "对账美元代销供应商",
              "settleCurrencyType": "CNY",
              "exchangeRate": "0.1423",
              "refundTotalAmount": "47.35",
              "freeReceivableAmount": "0.00",
              "freePayAmount": "0.00",
              "totalPayAmount": "47.35",
              "PayedAmount": "47.35",
              "status": "已付款",
              "preparedTime": "2019-12-06 10:39:37",
              "preparedUser": "merchant",
              "reviewTime": "2019-12-06 10:40:17",
              "reviewUser": "merchant"
            }],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },
        dialogImageUrl: '',

        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dialogVisibleImage: false,
        merchantVisible: false,//商户页面是否显示
        clickMerchantVisible: false,//商户页面是否显示
        dataForm: {},
        deptData: [],
        dataFormRules: {
        },
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: [],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

      }
    },
    methods: {
      cancelClick() {
        this.addShow = !this.addShow;
      },
      // 获取分页数据
      findPage: function (data) {
        this.filters.t = 'replaceSaleSettle'
        this.$refs.CyTable.findPage(this.filters)
      },
      //mock数据
      findPageMock: function () {
        this.$refs.CyTable.findPageMock(this.pageResultDetail)
      },
      clinkMock: function () {
        this.$refs.CyTable1.findPageMock(this.clickDetail)
      },
      // 根据日期查询数据
      findPageByDate: function (data) {
        this.filters.t = 'replaceSaleSettle'
        this.$refs.CyTable.findPageByDate(this.filters)
      },
      //弹窗关闭方法
      handleClose() {
        this.$refs.dataForm.resetFields()
      },
      // 批量删除
      handleDelete: function (data) {
        var ids = '';
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ',';
        }
        data.t = 'replaceSaleSettle'
        data.ids = ids
        this.utils.request.deleteUserInfo(data, this.deleteInfoBack)
      },
      //删除callback
      deleteInfoBack(data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败, ', type: 'error'})
        }
        this.findPage();
      },

      //导入方法
      importexe() {
        this.printPage = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let filename = "代销结算"
          this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
        }).catch(() => {

        });
      },
      // 显示新增界面
      handleAdd: function () {
        this.merchantVisible = true
        this.dialogVisible = true
        this.operation = true
        this.dataForm.id = "";
        //this.dataForm={};
        if (this.$refs['dataForm'] != undefined) {
          this.$refs['dataForm'].resetFields();
        }
        this.dataForm.document_license = "";
      },
      // 打印
      print: function () {
        this.printPage = true
        this.operation = true
      },
      reset: function () {
        this.filters = {};
        this.findPageMock()
      },

      resetCyTable1: function () {
        this.filtersCyTable1 = {};
        this.clinkMock()
      },

      operationClick: function () {
        var this_ = this;
        this_.filters.supplier = "1945233321";
        this_.merchantVisible = false;
        this_.clickMerchantVisible = false;
      },

      // 显示编辑界面
      handleDetail: function (params) {
        console.log(params)
        this.dialogVisible = true
        this.operation = false
        var this_ = this;
        this.$nextTick(function () {
          this_.dataForm = Object.assign({}, params.row);
        });
      },
      // 编辑
      submitForm: function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              params.t = 'replaceSaleSettle';
              this.utils.request.editUserInfo(params, this.editInfoBack)
            })
          }
        })
      },
      // 新增修改回调
      editInfoBack: function (data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败', type: 'error'})
        }
        this.findPage();
        this.dialogVisible = false
        this.operation = false
        this.editLoading = false
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = []
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
      },

      // 批量审核通过
      batchReviewSuccess: function () {
        this.$refs.CyTable.batchOperationMock("审核通过");
      },

      batchAutoRefund: function () {
        this.$refs.CyTable.batchOperationMock("退款成功");
      },

      // 下一步
      nextStep: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            var this_ = this;
            this_.dialogVisible = false;
            //只有选择供应商的时候才会弹出选择供应商页面
            if (this_.dataForm.settle_reconciliation_type == '2') {
              this_.merchantVisible = true;
            } else {
              this_.jumpPage();
            }
          }
        });
      },
      // 下一步(供应商)
      nextStepMerchant: function () {
        var this_ = this;
        this_.merchantVisible = false;
        this_.clickMerchantVisible=false;
        this_.jumpPage();
      },
      //跳转新页
      jumpPage: function () {
        this.addShow = true;
      },

    },
    mounted() {
      this.findPageMock()
      this.initColumns()
    }

  }
</script>
